<template>
    <div class="left-bar">
        <el-aside :class="iss ? 'aside-64' : 'aside-180'" style="width: 100%"> 
            <div class="logo">
                <div class="block"><img :class="iss ? 'img-56' : 'img-200'" :src="src"/></div>
            </div>
            <el-menu :unique-opened	="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="iss" router :default-active="$route.path" v-if="userPowers">
                <el-submenu  v-for="(item) in userPowers[0].children" :key="item.permissionId" :index="item.httpPath">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                   
                    <section>
                        <el-menu-item  v-for="itemo in item.children" :key="itemo.permissionId" :index="itemo.httpPath">{{itemo.title}}</el-menu-item>
                    </section>
                </el-submenu>
                <!-- <NavMenu :navMenus="Menu"></NavMenu> -->
            </el-menu>
        </el-aside>
    </div>
</template>
<script>
    import NavMenu from './navMenu' 
    import Menu from '../../api/menu'
    export default {
        components: {NavMenu},
        computed: {
            iss() {
                if(this.$store.state.isOpen) {
                    this.src= 'https://goods.dingdian.xin/Fs6AjocM2a6-JIRWCvFavX_s2_mT?imageMogr2/thumbnail/400000@'
                }else{
                    this.src= 'https://goods.dingdian.xin/Fi0uNP33gYGM8aqo9ngV1gTZ2GW4?imageMogr2/thumbnail/400000@'
                   
                }
                return this.$store.state.isOpen
            },
            userPowers() {
                if(this.$store.state.isChange) {
                    return this.$store.state.userPowers
                }else{
                    return JSON.parse(sessionStorage.getItem('userInfos')).userPower
                }
            }
        },
        created() {
            this.Menu= Menu
        },
        watch: {
            userAssignId(val1, val2) {
         
            }
        },
  
        data() {
            return {
              //  userPowers: JSON.parse(sessionStorage.getItem('userInfos')).userPower,
                userAssignId: sessionStorage.getItem('userAssignId'),
                isCollapse: this.$store.state.isOpen || false,
                index: '',
                Menu: [],
                src: ''
            }
        },



        methods: {
            handleOpen(key, keyPath) {
                this.index= key
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>
<style lang="less" scoped>
//@import url(../../style/leftBar.less);
    .logo {
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2px;
        box-shadow: 0px 2px 8px 0px rgba(173, 14, 14, 0.1);
        background: #fff;
    }
   
    .el-aside {
        color: #333;
        height: 100%; 
    
        overflow: hidden;
      
        .el-menu--inline{
            height: 100%;
            width: 160px;
            overflow: hidden;
            overflow-y: scroll;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .is-active {
                background: #fff1f1;
                border-radius: 5px;
                color: #f44949;
            }
         
            .el-menu-item {
                box-sizing: border-box;
                width: 160px!important;
                text-align: left;
                height: 34px;
                line-height: 34px;
            }
        }
        .el-submenu .el-menu-item{
            min-width: 160px!important;
            height: 34px !important;
            border-radius: 17px;
        }
        .el-submenu .is-opened .el-submenu__title {
            box-shadow: 1px 10px 20px 0px 
            rgba(230, 0, 18, 0.15);
            border-radius: 10px;
            i {
                color: red !important;
            }
        }
      

    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 180px;
        box-sizing: border-box;
        padding:0 10px;
    }
    .el-menu--vertical {
        
        .el-menu-item {
           
            height: 34px;
            line-height: 34px;
        }
        .is-active {
            background: #fff1f1 !important;
            color: #474747;
        }
    }
    .block {
        display: flex;
        justify-content: center;
    }
    
</style>

